<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>区域物流</title>
		<link href="css/common.css" rel="stylesheet" type="text/css" />
		<link href="css/normolize.css" rel="stylesheet" type="text/css" />
		<link href="css/style.css" rel="stylesheet" type="text/css" />
		<!--[if IE 9]> <link href="css/ieHack9.css" rel="stylesheet" type="text/css" /> <![endif]-->
		<!--[if IE 8]> <link href="css/ieHack.css" rel="stylesheet" type="text/css" /><link href="css/ieHack8.css" rel="stylesheet" type="text/css" /> <![endif]-->
		<!--[if lte IE 7]> <link href="css/ieHack.css" rel="stylesheet" type="text/css" /> <![endif]-->
		<style>
			.table table>tbody>tr>td {
				text-align: left;
			}
			
			.btn {
				color: #ccc;
			}
			
			.disabled {
				color: #666;
			}
			
			.btn:hover {
				background: #fff;
				color: #ccc;
			}
			
			.btn.blue:hover {
				color: #fff;
			}
			
			.btn.disabled:hover {
				color: #666;
			}
			
			.table {
				overflow: visible;
				padding-left: 40px;
				background: #eee;
				margin-bottom: 0px;
			}
			
			.catelist .item {
				position: relative;
			}
			
			.catelist .title {
				height: 40px;
				line-height: 40px;
				cursor: pointer;
				border-bottom: 1px solid #ddd;
				position: relative;
				z-index: 1;
			}
			
			.table table {
				margin-top: 0px;
				margin-bottom: 0px;
			}
			
			i.icon.icon_addPlan,
			i.icon.icon_edit {
				height: 40px;
			}
			
			i.icon.icon_edit {
				background-position: -179px -8px;
				margin-right: 10px;
			}
			
			i.icon.icon_addPlan {
				margin-right: 10px;
			}
			
			i.icon.icon_delete {
				background-position: -179px -49px;
			}
			
			.cate_container {
				border: 1px solid #ddd;
				margin-top: 10px;
				position: relative;
				margin-bottom: 64px;
				border-bottom: none;
			}
			
			.caret {
				border-top: 4px solid #666;
				margin-left: 29px;
				margin-right: 6px;
			}
			
			.caret.right {
				border-top: 4px solid transparent;
				border-left: 4px solid #666;
				margin-top: -2px;
			}
			
			.table ul li {
				width: 100%;
				padding: 0px 78px 0px 165px;
				line-height: 40px;
			}
			
			.table ul li ul li {
				padding: 0px 0px 0px 165px;
			}
			
			.table ul li ul.districtlist {
				width: 100%;
				padding-left: 30px;
			}
			
			.table ul li .caret {
				margin-left: 0px;
			}
			
			.table>ul {
				border-left: 1px solid #ddd;
			}
			
			.table>ul>li {
				border-bottom: 1px solid #ddd;
				cursor: pointer;
			}
			
			.thead {
				width: 175px;
				padding-left: 40px;
				line-height: 40px;
			}
			
			.item>.iconlist {
				margin-right: 78px;
				position: absolute;
				top: 0px;
				right: 0;
				z-index: 10;
			}
			
			.selected .catename {
				color: #17A3D7 !important;
			}
			
			.iconlist i.icon {
				margin-top: 0px;
			}
			/*i.icon.icon_addPlan {background-position:-173px -119px;}
			i.icon.icon_edit {background-position:-179px -0px;}*/
			
			.iconlist i.icon.icon_addPlan {
				background-position: -173px -124px;
			}
			
			.iconlist i.icon.icon_edit {
				background-position: -179px -6px;
			}
			
			.selected i.icon.icon_edit {
				background-position: -79px -0px;
			}
			
			.selected i.icon.icon_addPlan {
				background-position: -73px -119px;
			}
			
			.catename {
				line-height: 42px;
			}
		</style>
		<style>

		</style>
	</head>

	<body>
		<script src="js/tpl/header.js" type="text/javascript" charset="utf-8"></script>
		<div class="page-wrapper productlist minwidth border" id="page-wrapper">
			<div class="line"></div>
			<script src="js/tpl/adminMenu.js" type="text/javascript" charset="utf-8"></script>
			<div class="vertival-line"></div>
			<div class="page-content">
				<div class="tablist">
					<ul>
						<li class="tabItem active">
							<a href="area.html#area">区域物流</a>
						</li>
						<li class="tabItem">
							<a href="wuliuManage.html#area">物流管理</a>
						</li>
					</ul>
				</div>

				<div class="page-container">
					<div class="page-form" style="margin-top:20px;">
						<div class="form">
							<form class="inline-form">
								<div>
									<input type="text" id="areaname" placeholder="请输入地区名称" style="width: 243px;" />
								</div>
								<input type="button" value="搜索" onclick="searchArea()" class="search-input-button" />
								<input type="button" value="重置" class="search-input-button bgblue" onclick="resetForm()" />
							</form>
						</div>

						<div class="clearfix"></div>

						<div class="cate_container">
							<div style="height:100%;width:9px;background:#1488b3;position:absolute;top:0;bottom:0;left:0;z-index: 11;"></div>
							<div>
								<ul>
									<li class="thead">省</li>
									<li class="thead">市</li>
									<li class="thead">区/县</li>
									<li class="thead">区域编码</li>
									<li class="thead">操作</li>
								</ul>
							</div>
							<div class="catelist">
								<div class="item">
									<div class="title">
										<span class="right caret"></span> <span class="catename" data-id='1001' data-level='1'>广东省</span>
									</div>
									<div class="fr iconlist">
										<i class="icon icon_addPlan" onclick="getId(this,1)" data-cateId='1001'></i>
										<i class="icon icon_edit" onclick="editId(this,1)" data-cateId='1001'></i>
									</div>
									<div class="table none" style="">
										<ul class="citylist">
											<li onclick="toggleLI(this)">
												<span class="right caret"></span><span data-id='10011' class="catename" data-level='2'>深圳市</span>
												<div class="fr iconlist">
													<i class="icon icon_addPlan" onclick="getId(this,2)" data-cateId='10011'></i>
													<i class="icon icon_edit" onclick="editId(this,2)" data-cateId='10011'></i>
												</div>
												<ul class="districtlist none">
													<li>
														<span data-id='100111' class="catename" data-level='3'>龙岗区</span>
														<div class="fr iconlist">
															<i class="icon icon_edit" onclick="editId(this,3)" data-cateId='100111'></i>
														</div>
													</li>
													<li>
														<span data-id='100112' class="catename" data-level='3'>罗湖区</span>
														<div class="fr iconlist">
															<i class="icon icon_edit" onclick="editId(this,3)" data-cateId='100112'></i>
														</div>
													</li>
												</ul>
											</li>
											<li onclick="toggleLI(this)">
												<span class="right caret"></span><span data-id='10012' class="catename" data-level='2'>广州市</span>
												<div class="fr iconlist">
													<i class="icon icon_addPlan" onclick="getId(this,2)" data-cateId='10012'></i>
													<i class="icon icon_edit" onclick="editId(this,2)" data-cateId='10012'></i>
												</div>
												<ul class="districtlist none">
													<li>
														<span data-id='100121' class="catename" data-level='3'>越秀区</span>
														<div class="fr iconlist">
															<i class="icon icon_edit" onclick="editId(this,3)" data-cateId='100121'></i>
														</div>
													</li>
													<li>
														<span data-id='100122' class="catename" data-level='3'>天河区</span>
														<div class="fr iconlist">
															<i class="icon icon_edit" onclick="editId(this,3)" data-cateId='100122'></i>
														</div>
													</li>
												</ul>
											</li>
											<li onclick="toggleLI(this)">
												<span class="right caret hidden"></span><span data-id='10013' class="catename" data-level='2'>湛江市</span>
												<div class="fr iconlist">
													<i class="icon icon_addPlan" onclick="getId(this,2)" data-cateId='10013'></i>
													<i class="icon icon_edit" onclick="editId(this,2)" data-cateId='10013'></i>
												</div>
												<ul class="districtlist none">

												</ul>
											</li>
											<li onclick="toggleLI(this)">
												<span class="right hidden caret"></span><span data-id='10014' class="catename" data-level='2'>佛山市</span>
												<div class="fr iconlist">
													<i class="icon icon_addPlan" onclick="getId(this,2)" data-cateId='10014'></i>
													<i class="icon icon_edit" onclick="editId(this,2)" data-cateId='10014'></i>
												</div>
												<ul class="districtlist none">

												</ul>
											</li>

										</ul>
									</div>

								</div>

								<div class="item">
									<div class="title">
										<span class="right caret"></span> <span data-id='1002' class="catename" data-level='1'>江苏省</span>
									</div>
									<div class="fr iconlist">
										<i class="icon icon_addPlan" onclick="getId(this,1)" data-cateId='1002'></i>
										<i class="icon icon_edit" onclick="editId(this,1)" data-cateId='1002'></i>
									</div>
									<div class="table none" style="">
										<ul class="citylist">
											<li onclick="toggleLI(this)">
												<span class="right caret"></span><span data-cateId='10021' class="catename" data-level='2'>徐州市</span>
												<div class="fr iconlist">
													<i class="icon icon_addPlan" onclick="getId(this,2)" data-cateId='10021'></i>
													<i class="icon icon_edit" onclick="editId(this,2)" data-cateId='10021'></i>
												</div>
												<ul class="districtlist none">
													<li>
														<span class="catename" data-cateId='100211' data-level='3'>云龙区</span>
														<div class="fr iconlist">
															<i class="icon icon_edit" onclick="editId(this,3)" data-cateId='100211'></i>
														</div>
													</li>
													<li>
														<span class="catename" data-cateId='100212' data-level='3'>泉山区</span>
														<div class="fr iconlist">
															<i class="icon icon_edit" onclick="editId(this,3)" data-cateId='100212'></i>
														</div>
													</li>
												</ul>
											</li>
											<li onclick="toggleLI(this)">
												<span class="right hidden caret"></span><span data-cateId='10022' data-level='2' class="catename">苏州市</span>
												<div class="fr iconlist">
													<i class="icon icon_addPlan" onclick="getId(this,2)" data-cateId='10022'></i>
													<i class="icon icon_edit" onclick="editId(this,2)" data-cateId='10022'></i>
												</div>
												<ul class="districtlist none">

												</ul>
											</li>
											<li onclick="toggleLI(this)">
												<span class="right caret hidden"></span><span data-cateId='10023' data-level='2' class="catename">南京市</span>
												<div class="fr iconlist">
													<i class="icon icon_addPlan" onclick="getId(this,2)" data-cateId='10023'></i>
													<i class="icon icon_edit" onclick="editId(this,2)" data-cateId='10023'></i>
												</div>
												<ul class="districtlist none">

												</ul>
											</li>

										</ul>
									</div>

								</div>

								<div class="item" data-id='1003'>
									<div class="title">
										<span class="right hidden caret"></span> <span data-cateId='1003' data-level='1' class="catename">浙江省</span>
									</div>
									<div class="fr iconlist">
										<i class="icon icon_addPlan" onclick="getId(this,1)" data-cateId='1003'></i>
										<i class="icon icon_edit" onclick="editId(this,1)" data-cateId='1003'></i>
									</div>
									<div class="table none" style="">
										<ul class="citylist">

										</ul>
									</div>

								</div>

							</div>
						</div>
					</div>

				</div>

			</div>
		</div>

		<div class="footer">
			<div class="footercontainer">
				<ul>
					<li>
						<a href="#">关于我们</a>
					</li>
					<li>
						<a href="#">服务与支持</a>
					</li>
					<li>
						<a href="#">常见问题</a>
					</li>
					<li>
						<a href="#">人才招聘</a>
					</li>
					<li>
						<a href="#">加盟合作</a>
					</li>
				</ul>

				<div style="margin-top:13px;">版权所有@ 2015 - 2016 深圳在乎传媒科技有限公司 粤ICP备15107022-1号</div>
			</div>

		</div>

		<!--这里是删除产品的弹框（无法删除）-->

	</body>

	<script src="js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/js.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/layer/layer.js" type="text/javascript" charset="utf-8"></script>
	<!--<script src="js/scroll/jquery.slimscroll.min.js" type="text/javascript" charset="utf-8"></script>-->
	<script src="js/layer/layer.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/layFun.js" type="text/javascript" charset="utf-8"></script>
	<script>
		$(function() {
			areaObj.slide();
			areaObj.addArea();
		});

		function getId(obj, level) {
			areaObj.id = $(obj).attr('data-cateId');
			areaObj.level = level;
			areaObj.operateObj = obj;
			layObj.open('addArea.html', 400, 200, '添加地区', areaObj.getAreaName);
		}
		/*
		 * areaname:要添加的地区的ID,
		 * pid:要添加的地区的父ID
		 */
		function ajaxAddArea(areaname, pid) {
			console.log(pid + " " + areaname);
			var addedId = 1; //这个是新增成功之后的ID
			return addedId;
		}

		function editId(obj, level) {
			areaObj.id = $(obj).attr('data-cateId');
			areaObj.level = level;
			areaObj.operateObj = obj;
			layObj.open('addArea.html', 400, 200, '修改地区', areaObj.editAreaName);
		}
		/*
		 * areaname:要添加的地区的ID,
		 * id:要修改的地区的ID
		 */
		function ajaxEditArea(areaname, id) {
			console.log(id + " " + areaname);

		}

		function toggleLI(obj) {
			$(obj).find('.caret ').toggleClass('right');
			if($(obj).find('.districtlist ').hasClass('none')) {
				var data = [{
					'id': 'ff',
					'name': 'fdfd'
				}, {
					'id': 'ff',
					'name': 'fdfd'
				}];
				var dhtml = areaObj.formdistrictItem('', '', data);
				console.log(dhtml);
				$(obj).find('.districtlist ').html(dhtml);
			}
			$(obj).find('.districtlist ').toggleClass('none');
		}

		function ajaxFindId(searchname) {
			var searchIds = ['10012'];
			return searchIds;
		}

		function searchArea() {
			var searchname = $('#areaname').val();
			var ids = ajaxFindId(searchname);
			if(ids) {
				$.each(ids, function(key, index) {
					console.log(key + " " + index);
					$('.catename').each(function() {
						var cid = $(this).attr('data-id');
						var level = $(this).attr('data-level');
						if(cid == index) {
							$(this).parent().addClass('selected');
							if(level == 1) {

							} else if(level == 2) {
								$(this).parent().parent().parent().removeClass('none');
							} else if(level == 3) {
								$(this).parent().parent().removeClass('none');
								$(this).parent().parent().parent().parent().parent().removeClass('none');
							}
						} else {
							$(this).parent().removeClass('selected');
						}
					})
				});
			}

		}

		var areaObj = {
			'_self': '',
			'id': '',
			'level': '',
			'addObj': '',
			'slide': function() {
				//这里是分类下拉
				$('.title').each(function() {
					$(this).click(function() {
						if($(this).next().next('.table').hasClass('none')) {
							//这里是展开 你可以在这里面写异步
							var data = [{
								'id': 'ff',
								'name': 'fdfd'
							}, {
								'id': 'ff',
								'name': 'fdfd'
							}];
							
							var dhtml = areaObj.formcityItem('', '',data);;
							console.log(dhtml);
							$(this).next().next('.table').find('.citylist').html(dhtml);
						}
						$(this).find('.caret ').toggleClass('right');
						$(this).next().next('.table').toggleClass('none');
					})
				});

			},
			'addArea': function() {
				_self = this;
			},
			'getAreaName': function(layobj, index) {
				var body = layer.getChildFrame('body', index);
				body.find('#subButton').click(function() {
					var name = body.find('.cate_name').val();
					if(!name) {
						body.find('.error').removeClass('none');
						return false;
					} else {
						body.find('.error').addClass('none');
					}
					var html = '',
						childItem, caretItem;
					var addedId = ajaxAddArea(name, _self.id);

					if(_self.level == 1) {
						html = _self.formcityItem(name, addedId);
						childItem = $(_self.operateObj).parent().next().find('.citylist');
						caretItem = $(_self.operateObj).parent().prev().find('.caret');
					} else if(_self.level == 2) {
						html = _self.formdistrictItem(name, addedId);
						childItem = $(_self.operateObj).parent().next();
						caretItem = $(_self.operateObj).parent().prev().prev();
					}
					$(caretItem).removeClass('right');
					$(caretItem).removeClass('hidden');
					$(_self.operateObj).parent().next().removeClass('none');
					$(childItem).append(html);
					layer.close(index);
				})
			},
			'formcityItem': function(name, addedId, datas) {
				datas = datas ? datas : '';
				var html = '';
				if(datas) {
					for(var i = 0; i < datas.length; i++) {
						var data = datas[i];
						html += '<li onclick="toggleLI(this)"> <span class="caret right hidden"></span><span data-id="' + data.id + '"  data-level="2" class="catename">' + data.name + '</span> <div class="fr iconlist"> <i class="icon icon_addPlan" onclick="getId(this,2)" data-cateId="' + data.id + '"></i> <i class="icon icon_edit" onclick="editId(this,2)" data-cateId="' + data.id + '"></i> </div> <ul class="districtlist none">  </ul> </li>';
					}
				} else {
					html = '<li onclick="toggleLI(this)"> <span class="caret right hidden"></span><span data-id="' + addedId + '"  data-level="2" class="catename">' + name + '</span> <div class="fr iconlist"> <i class="icon icon_addPlan" onclick="getId(this,2)" data-cateId="' + addedId + '"></i> <i class="icon icon_edit" onclick="editId(this,2)" data-cateId="' + addedId + '"></i> </div> <ul class="districtlist">  </ul> </li>';
				}

				return html;
			},
			'formdistrictItem': function(name, addedId, datas) {
				datas = datas ? datas : '';
				var html = '';
				if(datas) {
					for(var i = 0; i < datas.length; i++) {
						var data = datas[i];
						console.log(data);
						html += '<li><span data-id="' + data.id + '"  data-level="3" class="catename">' + data.name + '</span><div class="fr iconlist"> <i class="icon icon_edit" onclick="editId(this,3)" data-cateid="' + data.id + '"></i> </div></li>';
					}
				} else {
					html = '<li><span data-id="' + addedId + '"  data-level="3" class="catename">' + name + '</span><div class="fr iconlist"> <i class="icon icon_edit" onclick="editId(this,3)" data-cateid="' + addedId + '"></i> </div></li>';
				}
				return html;
			},
			'editArea': function() {
				_self = this;
			},
			'editAreaName': function(layobj, index) {
				var body = layer.getChildFrame('body', index);
				var childItem;
				childItem = $(_self.operateObj).parent().prev();
				var value;
				if(_self.level == 1) {
					value = $(childItem).find('.catename').html();
				} else {
					value = $(childItem).html();
				}

				body.find('.cate_name').val($.trim(value));
				body.find('#subButton').click(function() {
					var name = body.find('.cate_name').val();
					if(!name) {
						body.find('.error').removeClass('none');
						return false;
					} else {
						body.find('.error').addClass('none');
					}

					ajaxEditArea(name, _self.id);

					$(childItem).html(name);

					if(_self.level == 3) {
						$(_self.operateObj).parent().parent().parent().removeClass('none');
					}
					layer.close(index);
				})
				body.find('#cancelButton').click(function() {
					layer.close(index);
				})
			},
		}
	</script>

</html>